<template>
	<view class="login-main">
		<view class="login-bg">
			<image src="@/static/images/login_bg.png" mode=""></image>
		</view>
		<view class="login-con">
			<view class="content">
				<image class="logo" src="@/static/images/logo.png"></image>
				<text class="title">{{title}}</text>
			</view>
			<form @submit="login">
			<view class="login-form">
				<view class="uni-padding-wrap uni-common-mt">
					<view class="login-title">登录</view>
						<!-- <view>
							<text>IoT平台地址手动输入？</text><switch color="#008700" style="transform:scale(0.7)" @change="switchChange" />
						</view>
						<view class="uni-list" v-show="!input">
							<view class="uni-list-cell">
								<view class="title">
									<uni-icons type="location-filled" size="20" color="#008700"></uni-icons>
								</view>
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{array[index]}}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class="uni-common-mt" v-show="input">
							<view class="uni-form-item uni-column">
								<view class="title">
									<uni-icons type="location-filled" size="20" color="#008700"></uni-icons>
								</view>
								<input class="uni-input" name="address" :value="address" placeholder="请输入Jetlink地址" />
							</view>
						</view> -->
						<view class="uni-form-item uni-column">
							<view class="title">
								<uni-icons type="person-filled" size="20" color="#008700"></uni-icons>
							</view>
							<view class="uni-input-wrapper">
								<input class="uni-input" placeholder="请输入用户名" name="username" :value="username" />
							</view>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">
								<uni-icons type="locked-filled" size="20" color="#008700"></uni-icons>
							</view>
							<view class="uni-input-wrapper">
								<input class="uni-input" placeholder="请输入密码" name="password" :password="showPassword" :value="passwdValue"/>
								<uni-icons class="password-icon" :type="!showPassword ? 'eye-slash-filled' : 'eye-filled'" size="20" color="#81d372" @click="changePassword"></uni-icons>
							</view>
						</view>
					
				</view>
			</view>
			<view class="uni-form-button">
				<button type="primary" form-type="submit" :loading="isloading">登录</button>
			</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Landlink',
				username: '',
				address: '',
				passwdValue: '',
				changeValue: '',
				isloading: false,
				array: ['https://dev.4s-hk.com:9001','https://dc2021.4s-hk.com:9001', 
				'http://smart-site-test.polyu.tech:9001', 
				'https://sclab.4s-hk.com:9001'],
				index: 0,
				input: false,
				showPassword: true
			}
		},
		onLoad() {
			//初始化
			// const that = this
   //          uni.request({
			// 	url: "http://smart-site-test.polyu.tech:9123/iot/url", //仅为示例，并非真实接口地址。
			// 	method: 'GET',
			// 	data: {},
			// 	header: {
			// 		'custom-header': 'hello' //自定义请求头信息
			// 	},
			// 	success: (res) => {
			// 		const result = res.data
			// 		if (result.code == 0) {
			// 			that.array = result.data
			// 		}
			// 	}
			// });
		},
		methods: {
			changePassword: function() {
					this.showPassword = !this.showPassword;
			},
			login: function(e) {
				var formdata = e.detail.value 
				// if (this.input) {
					
				// } else {
				//    formdata.address = this.array[this.index];
				// }
				// console.log(formdata.address)
				// if (formdata.address === '') {
				// 	uni.showToast({
				// 		title: 'Jetlink地址为空！',
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				if (formdata.username == 'undefined' && formdata.username === '') {
					uni.showToast({
						title: '账号为空！',
						icon: 'none'
					});
					return
				}
				if (formdata.username == 'password' && formdata.password === '') {
					uni.showToast({
						title: '密码为空！',
						icon: 'none'
					});
					return
				}
				formdata.address = 'https://dev.4s-hk.com:9001'
				//formdata.username = 'admin'
				//formdata.password = 'admin'
				console.log(formdata)
				uni.request({
					url: formdata.address + "/api/authorize/login", //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						username: formdata.username,
						password: formdata.password
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						//console.log(res.data);
						var result = res.data;
						if (result.status == 200) {
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							//保存全局token
							const appInstance = getApp();
							appInstance.globalData.token = result.result.token;
							appInstance.globalData.url = formdata.address;
							//跳转
							uni.navigateTo({
								url: '../devices/index'
							})
						} else if (result.status == 400) {
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							});
						}
					}
				});

			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.address = this.array[this.index]
			},
			switchChange: function() {
				this.input = !this.input
			}
		}
	}
</script>

<style scoped>
	.login-main{
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow-y: hidden;
	}
	.login-bg{
		width: 100%;
		height: 100%;
	}
	.login-bg image{
		width: 100%;
		height: 100%;
	}
	.login-bg /deep/ uni-image{
		width: 100%;
		height: 100%;
	}
	.login-con{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.content .logo{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		background: #fff;
		padding: 30upx;
		margin: 140upx auto 30upx;
	}
	.content .title{
		color: #fff;
		font-size: 38upx;
	}
	.login-title{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #008700;
		font-weight: bold;
		font-size: 40upx;
		letter-spacing: 10upx;
	}
	.login-form{
		width: 90%;
		height: 500upx;
		background-color: #fff;
		border-radius: 14upx;
		margin: auto;
		box-shadow: 0 0 30upx rgba(0,0,0,0.3);
		padding: 30upx;
		margin-top: 60upx;
		box-sizing: border-box;
	}
	.uni-list-cell{
		margin: 40upx auto;
		height: 80upx;
		display: flex;
		align-items: center;
		border: 1px solid #008700;
		background-color: #edfcf0;
		border-radius: 8upx;
	}
	.uni-list-cell .title{
		width: 80upx;
		text-align: center;
	}
	.uni-form-item{
		margin: 40upx auto;
		height: 80upx;
		display: flex;
		align-items: center;
		border: 1px solid #008700;
		background-color: #edfcf0;
		border-radius: 8upx;
		position: relative;
	}
	.uni-form-item .title{
		width: 80upx;
		text-align: center;
	}
	.uni-input-wrapper .password-icon{
		position: absolute;
		right: 10upx;
		top: 20upx;
	}
	.uni-form-item .title {
		padding: 20upx 0;
		z-index: 9;
	}

	.uni-form-button {
		width: 90%;
		margin: 60upx auto 0;	
	}
	
	.uni-form-button uni-button{
		border-radius: 40upx;
		background-color: #008700;
	}

	.uni-padding-wrap {
		width: 100%;
		z-index: 9;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
		z-index: 1;
	}
</style>